<template>
    <!-- <div v-for="item in state.pageList">
        {{ item.project_Name }}
    </div> -->
    <nut-tabs v-model="value" size="large" style="width:90%;margin-left: 5%;margin-top: 5%;border-radius: 5px;">
        <template #titles>
            <div v-for="item in list" :key="item.paneKey" class="custom-tab-item" @click="value = item.paneKey">
                <div class="custom-title" :class="{ active: value === item.paneKey }">
                    <image style="width:30px;height: 25px; margin-right: 10%;" :src="item.icon">
                    </image><span style="font-size: 16px;">{{ item.title }}</span>
                </div>
                <div v-if="value == item.paneKey">
                    <image style="width:60px;height: 20px;margin-bottom: -2%;margin-left: 10%;"
                        src="https://cxj.szzkba.cn/upload/i/2024/06/04/181204.png">
                    </image>
                </div>
            </div>
        </template>
        <nut-tab-pane style="border-top: 0.5px solid rgb(174, 174, 174);margin-bottom: 100rpx;" v-for="item in list"
            :key="item.paneKey" :pane-key="item.paneKey">
            <!-- <div>{{ item.title }} </div> -->
            <div v-for="itemVal in state.pageList">
                <nut-card v-if="item.paneKey == itemVal.pageType" :is-need-price="false" :img-url="state.imgUrl"
                    :title="itemVal.project_Name">
                    <template #prolist>
                        <div class="card-tag-list">
                            <span v-for="itemV in itemVal.project_Tag" class="tag">{{ itemV }}</span>
                        </div>
                    </template>
                    <template #footer>
                        <div class="card-foot flex-a"><span
                                style="font-size: 18px;color: red; font-weight: bold;margin-right: 2%;">{{
        itemVal.mini_Amount }}</span><span style="font-size: 14px;">元/小时起</span> <nut-button
                                color="#2b35fa" size="mini" style="position: absolute;right: -50rpx;"
                                @click="jumpTo('/packageA/pages/detail/index?id=' + itemVal.ID)">去下单</nut-button> </div>
                    </template>
                </nut-card>
            </div>
        </nut-tab-pane>
    </nut-tabs>
</template>
<script setup lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { ref } from 'vue'
import { getPageSettingList } from '../../../api/index'
const value = ref('1')
const list = ref([
    {
        title: '服务',
        icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180234.png',
        paneKey: '0'
    },
    {
        title: '娱乐',
        icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180443.png',
        paneKey: '1'
    },
    {
        title: '运动',
        icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180153.png',
        paneKey: '2'
    }
])
const state = ref({
    imgUrl:
        'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg',
    title: '礼仪模特',
    pageList: [],
})
const getPageSetting = () => {
    getPageSettingList().then(res => {
        if (res.code == 0) {
            // console.log(res.data)
            for (var i in res.data.list) {
                res.data.list[i].project_Tag = res.data.list[i].project_Tag.split(",")
                console.log(res.data.list[i].project_Tag)
            }
            state.value.pageList = res.data.list
            console.log(res.data.list)
        }
    })
};
getPageSetting()
const jumpTo = (path) => {
    Taro.navigateTo({
        url: path
    })
}
</script>
<style lang="scss">
.custom-tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 12%;
}

.nut-card__right__shop {
    display: block !important;
}

.custom-title {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(66, 66, 66);
    cursor: pointer;
    // margin-top: 40%;
}

.custom-title.active {
    color: black;
    font-weight: bold;
    margin-top: 40%;
}

.nut-tabs__titles .nut-tabs__list {
    background: white;
}

.card-tag-list {
    margin: 15% 0 1px;
    height: 30px;
    overflow: hidden;
}

.card-tag-list>.tag {
    float: left;
    padding: 0 10px;
    border-radius: 1px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    color: #999;
    background-color: #f2f2f7;
    margin-right: 5px;
}

.card-foot {
    margin-top: 5%;
    position: relative;
}

.card-title {
    font-weight: bold;
}
</style>